<template>
  <u-first-layout>
    <div class="bottom">
        <div class="box1">
          <div class="title">
            <p>入库记录</p>
          </div>
          <div class="list" @click="gotolog">
            <div class="list-item" v-for="item in inLogList" :key="item.id">
              <div class="skuName">{{item.skuName}}</div>
              <div class="number">{{item.number}}{{item.unit}}</div>
            </div>
          </div>
        </div>
        <div class="box-center">
          <!-- <h1 style="font-size: 30px;font-weight: bold;">2132313213</h1> -->
          <div class="box2">
            <div class="top-area">
              <div class="center" id="barCharts" style="width: 370px;height:260px;border: solid 1px #1D7EF2;"> </div>
              <div class="right-area">
                <div class="rightListArea">
                  <div class="list-container">
                    <div class="list" @click="gotoProject">
                      <div class="list-box ">
                        <div class="list-item" v-for="(item, index) in totalUnFinish" :key="index + '01'">
                          <div class="name2">{{ item.projectName }}</div>
                          <div style="width: 440px;display: flex;flex-direction: row;align-items: center;justify-content: space-around;padding: 10px;border-top: dashed 1px #1D7EF2;" v-for="good in item.orderGoodsList">
                            <div style="color: #FFFFFF;flex:1;font-size: 14px;">{{ good.skuName }}</div>
                            <div style="color: #FFFFFF;width: 90px;text-align: center;font-size: 14px;">{{ good.numberCheck }}</div>
                            <div style="color: #FFFFFF;width: 90px;text-align: center;font-size: 14px;">{{ good.number1 }}</div>
                          </div>
                        </div>
                      </div>
                      <div class="list-box ">
                        <div class="list-item" v-for="(item, index) in totalUnFinish" :key="index + '02'">
                          <div class="name2">{{ item.projectName }}</div>
                          <div style="width: 440px;display: flex;flex-direction: row;align-items: center;justify-content: space-around;padding: 10px;border-top: dashed 1px #1D7EF2;" v-for="good in item.orderGoodsList">
                            <div style="color: #FFFFFF;flex: 1;font-size: 14px;">{{ good.skuName }}</div>
                            <div style="color: #FFFFFF;width: 90px;text-align: center;font-size: 14px;">{{ good.numberCheck }}</div>
                            <div style="color: #FFFFFF;width: 90px;text-align: center;font-size: 14px;">{{ good.number1 }}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="box-bottom">
            <div class="box3">
              <div class="title">
                <p>库存预警</p>
              </div>
              <div class="list" @click="gotoInventory">
                <div class="list-box" :class="alertList.length > 6 ? '' : ''">
                  <div class="list-item" v-for="item in alertList" :key="item.id + '1'">
                    <div class="name" style="">{{ item.skuName }}</div>
                    <div class="value" style="">{{ item.number + item.unit }}</div>
                  </div>
                </div>
                <div class="list-box" :class="alertList.length > 6 ? '' : ''">
                  <div class="list-item" v-for="item in alertList" :key="item.id + '2'">
                    <div class="name" style="">{{ item.skuName }}</div>
                    <div class="value" style="">{{ item.number + item.unit }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="box3">
              <div class="title">
                <p>未到货告警</p>
              </div>
              <div class="list">
                <div class="list-box" style="height: 600px;">
                  <div class="list-item" v-for="item in purchaseList" :key="item.id">
                    <div class="name">{{`(${item.originalNo})${item.supplierName || '暂估供应商'}`}}</div>
                    <div class="value">未完成</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="box1">
          <div class="title">
            <p>出库记录</p>
          </div>
          <div class="list" @click="gotolog">
            <div class="list-item" style="cursor: pointer;" v-for="item in outLogList" :key="item.id">
              <div class="skuName">{{item.skuName}}</div>
              <div class="number">{{item.number}}{{item.unit}}</div>
            </div>
          </div>
        </div>
      </div>
  </u-first-layout>
</template>

<script  lang="ts">
import { defineComponent, onMounted, onBeforeUnmount, ref, reactive, toRefs, computed } from 'vue'
import { parseTime } from '@/utils/index'
import ScaleView from '@/components/ScaleView/index.vue'
import logApi from '@/api/inwarehouse/log-api'
import goodsApi from '@/api/inwarehouse/goods-api'
import purchaseApi from '@/api/purchase/purchase-api'
import requirementApi from '@/api/purchase/requirement-api'
import * as echarts from "echarts";
import { useRouter } from 'vue-router'
import log from '../inwarehouse/log/log'
export default defineComponent({
  components: {
    ScaleView
  },
  setup() {
    const route = useRouter()
    let timer = null
    let timer2 = null

    const data = reactive({
      today: '',
      week: '',
      time: '',
      inLogList: [],
      outLogList: [],
      purchaseList: [],
      alertList: [],
      // totalFinish: [],
      totalUnFinish: []
    })

    const getDate = () => {
      timer = setInterval(() => {
        const date = new Date()
        data.week = '星期' + ['日', '一', '二', '三', '四', '五', '六'][date.getDay()]
        const tempDate = parseTime(date)
        data.today = tempDate.substring(0, 10)
        data.time = tempDate.substring(11, 19)
      }, 1000)
    }

    const getLogList = async () => {
      const outRes = await logApi.list({current: 1, size: 12, filter: {operate: '-1'} });
      const inRes = await logApi.list({current: 1, size: 12, filter: {operate: '1'} });
      data.outLogList = outRes.data.records;
      data.inLogList = inRes.data.records;
      console.log('data.inLogList',data.inLogList);
    }

    const getGoodsAlart = async () => {
      const res = await goodsApi.list({otherFilter: {alert: true}})
      data.alertList = res.data.records;
    }

    const getPurchaseApi = async () => {
      const res = await purchaseApi.list({otherFilter: {delay: true}})
      // console.log('getPurchaseApi',res);
      data.purchaseList = res.data.records
    }

    const getRequireList = async () => {
      const res = await requirementApi.clacAllRequire()
      // data.purchaseList = res.data.records
      // data.totalFinish = res.data.totalFinish;
      data.totalUnFinish = res.data.totalUnFinish;
    }

    const getSevenPurchase = async () => {
      const res = await purchaseApi.listCount()
      const data = res.data
      const xData = getXData()
      const yData = [data.one, data.two, data.three, data.fore,data.five, data.six, data.seven].reverse()
      initCharts(xData, yData)
    }

    const getXData = () => {
      const today = new Date();
      const arr = [];
      for(let i = 0; i < 7; i++) {
        const date = today.getTime() - i * 24 * 3600 * 1000;
        const m = new Date(date).getMonth() + 1;
        const d = new Date(date).getDate();
        const now = (m < 10 ? '0' + m : m)+ '-' + (d < 10 ? '0' + d : d);
        arr.push(now)
      }
      return arr.reverse()
    }

    const initCharts = (xData, yData) => {
      const myEChart= echarts.init(document.getElementById("barCharts"));
      const option = {
        // title: {
        //   text: '采购单',
        //   left: '40%',
        //   textStyle: {
        //     color: '#0FB5A7',
        //     fontWeight: 500
        //   }
        // },
        grid: {
          top:'10%',
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: '#1D7EF2'
            }
          },
          data: xData,
        },
        yAxis: {
          show: true,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#1D7EF2'
            }
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            type: "bar",
            itemStyle: {
              color: '#0FB5A7'
            },
            barWidth: '40%',
            data: yData,
          },
        ],
      };
      myEChart.setOption(option);
      // 根据页面大小自动响应图表大小
      // window.addEventListener("resize", function () {
      //   myEChart.resize();
      // })
    }

    const gotoProject = () => {
      route.push("/inwarehouse/project")
    }

    const gotoInventory = () => {
      route.push("/inwarehouse/inventory")
    }

    const gotolog = () => {
      route.push("/inwarehouse/log")
    }

    const toScreen =() =>{
      route.push("/screenMap")
    }

    const init = () => {
      getLogList()
      getGoodsAlart()
      getPurchaseApi()
      getRequireList()
      getSevenPurchase()
    }

    onMounted(() => {
      init()
      getDate()
      timer2 = setInterval(() => {
        init()
      }, 30000)
    })

    onBeforeUnmount(() => {
      clearInterval(timer)
      clearInterval(timer2)
    })


    return {
      ...toRefs(data),
      getDate,
      gotoProject,
      gotoInventory,
      gotolog,
      toScreen
    }
  }
})

</script>

<style lang="scss" scoped>
.bottom {
  padding: 10px ;
  display: flex;
  flex-direction: row;
  align-items: center;
  .box1 {
    width: 290px;
    height: 923px;
    // margin: 0 15px;
    background: #073b89;
    border-radius: 5px;
    // overflow: hidden;
    .title {
      padding: 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      background: #154a89;
      border-bottom: solid #ffffff 1px;
      p {
        font-size: 28px;
        font-weight: 600;
        color: #ffffff;
        &:before {
          content: "";
          width: 0;
          height: 0;
          border: 5px solid transparent;
          border-left: 5px solid #1d7ef2;
          margin-right: 10px;
        }
      }
    }
    .list {
      width: 100%;
      overflow-x: hidden;
      box-sizing: border-box;
      padding: 5px 10px;
      .list-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        height: 70px;
        border-bottom: solid #1d7ef2 1px;
        cursor: pointer;
        &:last-child {
          border: 0;
        }
        .skuName {
          width: 235px;
          font-size: 14px;
          color: #ffffff;
        }
        .number {
          text-align: center;
          flex: 1;
          font-size: 14px;
          color: #ffffff;
        }
      }
    }
  }
  .box-center {
    flex: 1;
    padding: 0 10px;
    .box2 {
      box-sizing: border-box;
      height: 350px;
      padding:20px;
      padding-bottom: 30px;
      background-image: url("~@/assets/image/box2.png");
      background-size: contain;
      background-repeat: no-repeat;
      .top-area {
        // margin-top: 20px;
        display: flex;
        flex-direction: row;
        // justify-content: space-between;
        .right-area {
          display: flex;
          flex-direction: column;
          width: 370px;
          height: 260px;
          .rightListArea {
            // width: 460px;
            height: 320px;
            .list-container {
              width: 100%;
              height: 250px;
              border: solid #1d7ef2 1px;
              padding: 5px;
              overflow: hidden;
              position: relative;
              .list {
                position: absolute;
                width: 460px;
                height: 400px;
                overflow-x: hidden;
                .list-box {
                  // width: 460px;
                  height: auto;
                  // &:hover{
                  //   animation-play-state:paused;
                  // }
                  .list-item {
                    display: flex;
                    flex-direction: column;
                    // align-items: left;
                    justify-content: center;
                    padding: 2px;
                    // height: 45px;
                    border-bottom: solid 1px #1d7ef2;
                    cursor: pointer;
                    // .name1 {
                    //   flex: 1;
                    //   font-size: 18px;
                    //   padding: 20px 0;
                    //   color: #25FF13;
                    // }
                    .name2 {
                      flex: 1;
                      font-size: 24px;
                      padding-top: 20px;
                      color: #ff5810;
                    }
                  }
                }
              }
            }
          }

          // .box4 {
          //   padding: 10px;
          //   background: #154A89;
          //   border: solid #1D7EF2 1px;
          //   border-radius: 2px;
          //   text-align: center;
          //   .value {
          //     height: 40px;
          //     line-height: 40px;
          //     color: #FFFFFF;
          //     font-size: 32px;
          //     font-weight: 600;
          //   }
          //   .name {
          //     height: 30px;
          //     line-height: 30px;
          //     color: #FFFFFF;
          //     font-size: 20px;
          //     font-weight: 500;
          //   }
          // }
          .box-bottom {
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            .box5 {
              padding: 10px;
              background: #154a89;
              border: solid #1d7ef2 1px;
              border-radius: 2px;
              text-align: center;
              margin-right: 10px;
              &:last-child {
                margin: 0;
              }
              .value {
                height: 40px;
                line-height: 40px;
                color: #ffffff;
                font-size: 32px;
                font-weight: 600;
              }
              .name {
                height: 30px;
                line-height: 30px;
                color: #ffffff;
                font-size: 20px;
                font-weight: 500;
              }
            }
          }
        }
        .center {
          margin: 0 10px;
        }
      }

      .bottom-area {
        // border: solid #FFFFFF 1px;
        height: 120px;
        margin: 10px 0;
      }
    }
    .box-bottom {
      // position: absolute;
      // left: 0px;
      // bottom: 0px;
      margin-top: 15px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      .box3 {
        margin-right: 20px;
        flex: 1;
        height: 560px;
        background: #073b89;
        overflow: hidden;
        position: relative;
        &:last-child {
          margin: 0;
        }
        .title {
          padding: 10px;
          display: flex;
          flex-direction: row;
          align-items: center;
          background: #154a89;
          border-bottom: solid #ffffff 1px;
          position: relative;
          z-index: 99;
          p {
            font-size: 28px;
            font-weight: 600;
            color: #ffffff;
            &:before {
              content: "";
              width: 0;
              height: 0;
              border: 5px solid transparent;
              border-left: 5px solid #1d7ef2;
              margin-right: 10px;
            }
          }
        }
        .list {
          width: 460px;
          height: 400px;
          position: absolute;
          overflow-x: hidden;
          .list-box {
            width: 460px;
            padding: 0 8px;
            height: auto;
            // overflow-y: hidden;
            .list-item {
              height: 50px;
              padding: 10px 0;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
              // box-sizing: border-box;
              border-bottom: solid #1d7ef2 1px;
              cursor: pointer;
              .name {
                flex: 1;
                font-size: 16px;
                color: #ffffff;
              }
              .value {
                width: 80px;
                font-size: 16px;
                color: #ffffff;
                text-align: center;
              }
            }
          }
        }
      }
    }
  }
}
</style>
